<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商品详情</title>
		<link rel="stylesheet" href="http://shop.com:5500/resources/css/bootstrap.min.css" type="text/css" />
		<script src="http://shop.com:5500/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="http://shop.com:5500/resources/js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/jquery-heima-0.0.1.js" ></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/heima-include.js" ></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/vue.js" ></script>
		<style>
			a:hover{
				text-decoration: none;
			}
		</style>

		
	</head>

	<body>
		<div class="container-fluid">
			<div id="header" style="min-height: 130px;"></div>	
			<div class="container">
				<div class="row">
					<div style="border: 1px solid #e4e4e4;width:930px;margin-bottom:10px;margin:0 auto;padding:10px;margin-bottom:10px;">
						<a href="./index.html">首页&nbsp;&nbsp;&gt;</a>
						<!-- <a href="./蔬菜分类.html">蔬菜</a> -->
					</div>
	
					<div style="margin:0 auto;width:950px;">
						<div class="col-md-6">
							<img id="pimage" style="opacity: 1;width:400px;height:350px;" title="" class="medium" src="http://shop.com:5500/resources/img/loading.gif">
						</div>
	
						<div class="col-md-6">
							<div><strong id="pname">大冬瓜</strong></div>
							<div style="border-bottom: 1px dotted #dddddd;width:350px;margin:10px 0 10px 0;">
								<div>编号：<span id="pid">751</span></div>
							</div>
	
							<div style="margin:10px 0 10px 0;">
								一口价: <strong style="color:#ef0101;">&yen;<span id="shop_price">4.44</span>元/份</strong> 参 考 价: <del>￥<span id="market_price">6.00</span>元/份</del>
							</div>
	
							<div style="margin:10px 0 10px 0;">促销: <a target="_blank" title="限时抢购 (2018-07-30 ~ 2018-09-01)" style="background-color: #f07373;">限时抢购</a> </div>
	
							<div style="padding:10px;border:1px solid #e7dbb1;width:330px;margin:15px 0 10px 0;;background-color: #fffee6;">
								<div style="border-bottom: 1px solid #faeac7;margin-top:20px;padding-left: 10px;">购买数量:
									<input id="quantity" name="quantity" value="1" maxlength="4" size="10" type="text"> </div>
	
								<div style="margin:20px 0px 10px 0px;padding-left: 70px;">
									<!-- 购物车按钮绑定单击事件 提交编号和数量 -->
									<a href="javascript:;" onclick="addCartItem()">
										<input style="background: url('http://shop.com:5500/resources/img/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0);height:36px;width:127px;" value="加入购物车" type="button">
									</a> 
								</div>
							</div>
						</div>
					</div>
					<div class="clearfix"></div>
					<div style="width:950px;margin:0 auto;">
						<div style="background-color:#d3d3d3;width:930px;padding:10px 10px;margin:10px 0 10px 0;">
							<strong>商品介绍</strong>
						</div>
	
						<!-- <div>
							<img src="http://shop.com:5500/resources/img/loading.gif">
						</div> -->
	
						<div style="background-color:#d3d3d3;width:930px;padding:10px 10px;margin:10px 0 10px 0;">
							<strong>商品参数</strong>
						</div>
						<div style="margin-top:10px;width:900px;" id="pdesc">
							三防智能手机 移动/联通双4G 安全 黑黄色 双4G美国军工IP69 30天长待机 3米防水防摔 北斗
						</div>
	
						<div style="background-color:#d3d3d3;width:900px;">
							<table class="table table-bordered">
								<tbody>
									<tr class="active">
										<th><strong>商品评论</strong></th>
									</tr>
									<tr class="warning">
										<th>暂无商品评论信息 <a>[发表商品评论]</a></th>
									</tr>
								</tbody>
							</table>
						</div>
	
						<div style="background-color:#d3d3d3;width:900px;">
							<table class="table table-bordered">
								<tbody>
									<tr class="active">
										<th><strong>商品咨询</strong></th>
									</tr>
									<tr class="warning">
										<th>暂无商品咨询信息 <a>[发表商品咨询]</a></th>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
	
				</div>
			</div>
			<div id="footer"  style="min-height: 203px;"></div>
		</div>
		<script>
			// 添加购物车方法 提交商品id 和数量
			function addCartItem(){
				
				var pid = HM.getParameter("pid");
				// alert(pid);
				// 获取 标签的值
				var count = $("#quantity").val();
				// 发请求
				// alert(count);
				$.ajax({
					url: "http://api.shop.com:8080/cart?md=addItem&pid="+pid+"&count="+count,
					type:"post",
					success:function(response){
						//成功回调 跳转购物车页面
						alert(response);
						location.href="../cart/list.html";
					}

				})
			}
			// 入口函数
			$(function(){
				var pid = HM.getParameter("pid");
				$.ajax({
					url:"http://api.shop.com:8080/product?md=findById&pid="+pid,
					type:"post",
					success:function(response) {
						// 处理字符串
						// alert(response);
						var info=eval("("+response+")");
						var p = info.data;
						// alert(p);
						$("#pimage").attr("src","http://shop.com:5500/"+p.pimage)
						// 编号
						$("#pid").html(p.pid);
						// 商品名字
						$("#pname").html(p.pname);
						// 市场价格
						$("#market_price").html(p.market_price);
						$("#shop_price").html(p.shop_price);
						// 描述
						$("#pdesc").html(p.pdesc);
					}
				})
				//查看商品id 为xx的数据
				// var pid=HM.getParameter("pid");
				// //发请求
				// HM.ajax("/product?md=findById","pid="+pid,function(vo){
				// 	var p=vo.data;
					
				// 	$("#pid").html(p.pid);
				// 	$("#pname").html(p.pname);
				// 	$("#market_price").html(p.market_price);
				// 	$("#shop_price").html(p.shop_price);
				// 	$("#pdesc").html(p.pdesc);
				// 	$("#pimage").attr("src","http://shop.com:5500/"+p.pimage)
				// })
			})
		</script>
	</body>
</html>